import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { Breadcrumbs } from "@/components/entity/breadcrumbs";
import { JsonLd } from "@/components/entity/json-ld";
import { Badge } from "@/components/ui/badge";
import { cn } from "@/components/ui/cn";
import { Card, CardBody, CardHeader, Page } from "@/components/ui/card";
import { LinkTabs } from "@/components/ui/tabs";
import { CoverageBar } from "@/components/intelligence/shared";
import { CountryFlag } from "@/components/ui/country-flag";
import { EmptyState, OfflineNotice } from "@/components/ui/states";
import { RowLink, TBody, THead, Table, Td, Th, Tr } from "@/components/ui/table";
import { api } from "@/lib/api";
import { fmtDate, fmtDelta, fmtInt, fmtPct } from "@/lib/format";
import type { SearchParams } from "@/lib/sort";
import { routes } from "@/lib/routes";
import { NOT_FOUND_METADATA, absoluteUrl, pageMetadata } from "@/lib/seo";
import { SCOPE_LABEL, firstSentence, fmtRankValue, rowHref, secondaryLabel } from "../ranking-format";

export const revalidate = 120;

type Params = Promise<{ key: string }>;

export async function generateMetadata({ params }: { params: Params }): Promise<Metadata> {
  const { key } = await params;
  const r = await api.ranking(key, { limit: 200 });
  if (!r.ok) return r.status === 404 || r.status === 400 ? NOT_FOUND_METADATA : { title: "Ranking" };
  const d = r.data;
  return pageMetadata({
    title: d.label,
    description: `Ranking of ${SCOPE_LABEL[d.scope].toLowerCase()} by ${d.label.toLowerCase()} — ${d.unit}. ${firstSentence(d.methodology)}`,
    path: routes.ranking(d.key),
  });
}

export default async function RankingPage({ params, searchParams }: { params: Params; searchParams: Promise<SearchParams> }) {
  const [{ key }, sp] = await Promise.all([params, searchParams]);
  const mode = sp.mode === "all" ? "all" : "strict";
  const r = await api.ranking(key, { limit: 200, mode });
  if (!r.ok && (r.status === 404 || r.status === 400)) notFound();
  if (!r.ok) {
    return (
      <Page className="py-6">
        <Breadcrumbs items={[{ name: "Rankings", href: routes.rankings() }, { name: key, href: routes.ranking(key) }]} className="mb-4" />
        <OfflineNotice detail={r.error} />
      </Page>
    );
  }
  const d = r.data;
  const rows = d.rows ?? [];
  const showFlag = d.scope === "countries" || rows.some((x) => x.countryIso2);
  const hasSecondary = rows.some((x) => x.secondary !== null && x.secondary !== undefined);
  const hasCoverage = rows.some((x) => x.coverage !== null && x.coverage !== undefined);
  const hasDelta = rows.some((x) => x.delta !== null && x.delta !== undefined);
  const secLabel = secondaryLabel(d.methodology);

  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "ItemList",
    name: d.label,
    description: firstSentence(d.methodology),
    url: absoluteUrl(routes.ranking(d.key)),
    numberOfItems: rows.length,
    itemListOrder: "https://schema.org/ItemListOrderDescending",
    itemListElement: rows.slice(0, 100).map((row) => ({ "@type": "ListItem", position: row.rank, name: row.name, url: absoluteUrl(rowHref(row, d.scope)) })),
  };

  return (
    <Page>
      <JsonLd data={jsonLd} />
      <Breadcrumbs items={[{ name: "Rankings", href: routes.rankings() }, { name: d.label, href: routes.ranking(d.key) }]} className="pt-4" />
      <header className="py-4 sm:py-6">
        <div className="label-caps mb-1.5">Ranking · {SCOPE_LABEL[d.scope]}</div>
        <h1 className="text-[22px] font-semibold leading-tight tracking-[-0.02em] text-ink sm:text-[28px]">{d.label}</h1>
        <div className="mt-2 flex flex-wrap items-center gap-2">
          <Badge tone="outline" mono>
            {d.unit}
          </Badge>
          <Badge tone="neutral">{SCOPE_LABEL[d.scope]}</Badge>
          <span className="figure text-[12px] text-ink-3">Computed {fmtDate(d.computedAt)}</span>
          {d.total > 0 && (
            <span className="figure text-[12px] text-ink-3">
              · {fmtInt(d.total)} {d.total === 1 ? "entity" : "entities"}
            </span>
          )}
        </div>
        {d.minCoverage !== undefined && d.minCoverage !== null && <p className="mt-2 max-w-2xl text-[12.5px] text-ink-3">Entities with fewer than 5 facilities or MW coverage below {fmtPct(d.minCoverage)} are excluded, not estimated.</p>}
        <p className="mt-1.5 max-w-2xl text-[12px] text-ink-4">Known / published figures only — entities without a figure are absent, not estimated.</p>
      </header>

      {d.minCoverage !== undefined && d.minCoverage !== null && (
        <div className="mb-4">
          <LinkTabs
            items={[
              { href: routes.ranking(d.key), label: "Strict", active: mode === "strict", count: d.total },
              { href: `${routes.ranking(d.key)}?mode=all`, label: "All observed", active: mode === "all" },
            ]}
          />
          <p className="mt-2 text-[11.5px] text-ink-3">
            <strong className="font-medium text-ink-2">Strict</strong> = coverage gate applied (≥ 5 facilities, ≥ {fmtPct(d.minCoverage)} with a figure). <strong className="font-medium text-ink-2">All observed</strong> lists every entity with at least one published figure regardless of coverage; the coverage column shows how incomplete each row is. Nothing is estimated in either view.
          </p>
        </div>
      )}

      {rows.length === 0 ? (
        <EmptyState
          title="No entity meets the coverage gate yet"
          description={
            d.minCoverage !== undefined && d.minCoverage !== null
              ? `This ranking only lists entities with at least 5 facilities and MW coverage of ${fmtPct(d.minCoverage)} or more. Nothing is estimated to fill the table; rows appear as primary sources publish capacity figures.`
              : "Rows appear once the worker has computed this ranking from indexed facilities. Nothing is estimated to fill the table."
          }
          action={
            <Link href={routes.rankings()} className="text-[13px] text-ink underline decoration-hair-2 hover:text-accent">
              All rankings
            </Link>
          }
        />
      ) : (
        <Table dense mobileCollapse={{ total: rows.length, label: "rows" }}>
          <THead>
            <tr>
              <Th numeric className="w-12">
                #
              </Th>
              <Th>{d.scope === "countries" ? "Country" : d.scope === "metros" ? "Market" : d.scope === "operators" ? "Operator" : "Facility"}</Th>
              <Th numeric>{d.unit}</Th>
              {hasSecondary && (
                <Th numeric className="hidden md:table-cell">
                  {secLabel}
                </Th>
              )}
              {hasCoverage && <Th className="w-[140px]">Coverage</Th>}
              {hasDelta && (
                <Th numeric className="hidden sm:table-cell">
                  Δ rank
                </Th>
              )}
            </tr>
          </THead>
          <TBody>
            {rows.map((row) => (
              <Tr key={row.id}>
                <Td label="Rank" numeric className="text-ink-3">
                  {row.rank}
                </Td>
                <Td primary>
                  <span className="inline-flex items-center gap-2">
                    {showFlag && row.countryIso2 && <CountryFlag iso2={row.countryIso2} size={13} />}
                    <RowLink href={rowHref(row, d.scope)}>{row.name}</RowLink>
                  </span>
                </Td>
                <Td label={d.unit} numeric lead>
                  {fmtRankValue(row.value, d.unit)}
                </Td>
                {hasSecondary && (
                  <Td label={secLabel} numeric className="hidden text-ink-3 md:table-cell">
                    {row.secondary === null || row.secondary === undefined ? "—" : fmtInt(row.secondary)}
                  </Td>
                )}
                {hasCoverage && (
                  <Td label="Coverage">
                    {row.coverage === null || row.coverage === undefined ? (
                      <span className="text-ink-4">—</span>
                    ) : (
                      <CoverageBar value={row.coverage} width="w-full sm:w-[120px]" label="Share of facilities with a MW figure" />
                    )}
                  </Td>
                )}
                {hasDelta && (
                  <Td label="Δ rank" numeric className="hidden sm:table-cell">
                    {row.delta === null || row.delta === undefined ? <span className="text-ink-4">new</span> : <span className={cn(row.delta > 0 ? "text-ok" : row.delta < 0 ? "text-danger" : "text-ink-3")}>{fmtDelta(row.delta)}</span>}
                  </Td>
                )}
              </Tr>
            ))}
          </TBody>
        </Table>
      )}

      <div className="mt-8 grid gap-4 md:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]">
        <Card>
          <CardHeader level={2} title="Methodology" description={`Unit: ${d.unit} · scope: ${SCOPE_LABEL[d.scope].toLowerCase()}`} />
          <CardBody>
            <p className="text-[13.5px] leading-relaxed text-ink-2">{d.methodology}</p>
          </CardBody>
        </Card>
        <Card>
          <CardHeader level={2} title="How to read this" />
          <CardBody className="text-[12.5px] leading-relaxed text-ink-2">
            <p>Values are lower bounds computed from published or filed figures only. Coverage is the share of an entity&apos;s facilities carrying any MW figure; a low coverage means the value understates reality.</p>
            <p className="mt-2">Δ rank compares with the previous computation of the same ranking; “new” marks an entity that was not ranked before.</p>
            <p className="mt-3">
              <Link href={routes.rankings()} className="text-ink underline decoration-hair-2 hover:text-accent">
                All rankings
              </Link>
              <span className="text-ink-4"> · </span>
              <Link href={`${routes.methodology()}#rankings`} className="text-ink underline decoration-hair-2 hover:text-accent">
                Methodology
              </Link>
            </p>
          </CardBody>
        </Card>
      </div>
    </Page>
  );
}